<!-- 我的-订单-详情 -->
<script setup>
import { reactive, ref, nextTick } from 'vue'
import { onLoad, onShow, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
// 全局页面数据
const data = reactive({
  barHeight: 0,
  navHeight: 0,
  msgNum: 2
})
onLoad(() => {
  //获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
  let { statusBarHeight } = uni.getSystemInfoSync()
  data.barHeight = statusBarHeight
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  data.navHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2
  // this.getList()
})
</script>

<template>
  <view class="order-detail-page">
    <!-- 背景图片 -->
    <image src="/static/images/my/head_bg.png" style="width: 100vw;height: 626rpx;" mode="widthFix" class="bg-img">
    </image>
    <!-- 头部内容 -->
    <view class="head-box" :style="{ 'padding-top': data.barHeight + 'px' }">
      <!-- navbar -->
      <view class="navbar" :style="{ 'height': data.navHeight + 'px' }">
        <view class="back-box">
          <up-icon name="arrow-left" color="#303133" size="20"></up-icon>
        </view>
        <text>订单详情</text>
      </view>
    </view>
    <!-- 内容区域 -->
  </view>
</template>

<style lang="scss" scoped>
.order-detail-page {
  min-height: 100vh;
  background: #F6F6F6;

  // 背景图片
  & .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  // 头部内容
  & .head-box {
    position: relative;
    z-index: 2;

    & .navbar {
      display: flex;
      align-items: center;
      justify-content: center;

      & .back-box {
        position: absolute;
        left: 24rpx;
      }
    }

    // background: #fff;
  }
}
</style>